<template>
	<view class='food-container' v-if='visibleSync' @click.stop='hideInput'>
		<view :class='scrollCoverDisplayFlag ? "scrolled" : ""' class='food-header' :style="{padding: setting.statusBarHeight + 'px 0px 0px 0px'}" v-if='scrollDisplayFlag'>
			<view class='header-wrapper' :style="{height: setting.topMenuHeight + 'px'}">
				<view class='header-left' @click.stop="hide">
					<uni-icons type='left' size='20' :color='scrollCoverDisplayFlag ? setting.corfb : setting.corw'></uni-icons>
				</view>
				<view class='header-middle'>
					<view class='food-head-author' v-if='scrollHeadDisplayFlag'>
						<image :src='food.author_head' mode="widthFix" class='i2'></image>
						<view class='food-head-subscribe'>关注</view>
					</view>
				</view>
				<view class='header-right'>
					// #ifndef MP
					<view class='header-icon'>
						<uni-icons type='paperplane' size='20' :color='scrollListFlag ? setting.corfb : setting.corw'></uni-icons>
					</view>
					<view class='header-icon'>
						<uni-icons type='more-filled' size='20' :color='scrollListFlag ? setting.corfb : setting.corw'></uni-icons>
					</view>
					// #endif
				</view>
			</view>
		</view>
		<scroll-view class='food-wrapper' :enable-flex='true' :scroll-y="true" :scroll-x="false" :style="{height: setting.windowHeight - bottomMenuBarHeight + 'px'}" 
			@scroll='scrollFoodWrapper' :animation='slideUpAnimation'>
			<view class='food-image'>
				<image :src='food.cover' mode='widthFix' class="food-cover" @load="loadFoodCover"></image>
			</view>
			<view class='food-content'>
				<view class='food-title'>{{food.name}}</view>
				<view class='food-author'>
					<view class='author-left'>
						<image :src='food.author_head' mode="widthFix" class='i1 author-image'></image>
						<text class='author-name'>{{food.author_name}}</text>
					</view>
					<view class='author-right'>
						<view class='authod-subscribe'>关注</view>
					</view>
				</view>
				<text class='food-remark' :decode="true">{{food.remark}}</text>
				<view class='food-labels'>
					<view class='food-label'>
						<image src='/static/image/ico-timer.png' class='label-image' mode='widthFix'/>
						<text class='label-text'>{{food.timeStr}}</text>
					</view>
					<view class='food-label'>
						<image src='/static/image/ico-level.png' class='label-image' mode='widthFix'/>
						<text class='label-text'>
							<block v-if='food.difficulty==1'>难度(容易)</block>
							<block v-if='food.difficulty==2'>难度(普通)</block>
							<block v-if='food.difficulty==3'>难度(困难)</block>
						</text>
					</view>
				</view>
				<uni-section title="食材清单" type="line" class='material-list' titleFontSize="15px" padding="0px" v-if='food.materialList!=null && food.materialList.length>0'>
					<template v-slot:right>
						<view class='material-head' @click.stop="addCart">
							<view class='material-func'>加入采购清单</view>
						</view>
					</template>
					<view class='material-items'>
						<view class='material-item' v-for="(material, materialIndex) in food.materialList" :key="materialIndex">
							<view class='material-name' :class='material.hasdetail?"active":""'>{{material.name}}</view>
							<view class='material-quantity'>{{material.quantity}}{{material.unit}}</view>
						</view>
					</view>
				</uni-section>
				<uni-section title="烹饪步骤" type="line" class='food-steps' titleFontSize="15px" padding="0px" v-if='food.cookStepList!=null && food.cookStepList.length>0'>
					<template v-slot:right>
						<view class='step-head' @click.stop="goCookModel">
							<view class='step-func'>进入烹饪模式</view>
						</view>
					</template>
					<view class='step-items'>
						<view class='step-item' v-for="(cookStep, cookStepIndex) in food.cookStepList" :key="cookStepIndex">
							<view class='step-title'>步骤{{cookStepIndex + 1}}/{{food.cookStepList.length}}</view>
							<image :src='cookStep.img' mode='widthFix' class='step-image'></image>
							<view class='step-remark'>{{cookStep.remark}}</view>
						</view>
					</view>
					<view class='food-summary'>
						<view class='food-date'>发布于{{food.dtcreateStr}}</view>
					</view>
				</uni-section>
				<uni-section title="暖心贴士" type="line" class='food-tips' titleFontSize="15px" padding="0px" v-if='food.tip!=null && food.tip!=""'>
					<view class='tips-remark'>{{food.tip}}</view>
				</uni-section>
				<uni-section title="学做作品" type="line" class='food-assigns' titleFontSize="15px" padding="0px" v-if='food.assignList!=null && food.assignList.length>0'>
					<template v-slot:right>
						<view class='assign-allbtn' @click.stop="goAllAssign">{{food.assignCount}}个作品</view>
					</template>
					<scroll-view class='assign-list' :style='{height: assignCoverHeight + 20 + "px"}' :scroll-x="true" :scroll-y="false">
						<view class='assign-item' v-for="(assign, assignIndex) in food.assignList" :key="assignIndex">
							<view class='assign-label'>
								<view class='assign-header'>
									<image :src="assign.author_head" class='i2 assign-headcover' mode='widthFix'></image>
									<view class='assign-name'>{{assign.author_name}}</view>
								</view>
							</view>
							<view class='assign-cover'>
								<image :src='assign.assign_cover' class='assign-image' mode="center" 
									:style='{width: assignCoverWidth + "px", height: assignCoverHeight + "px"}'></image>
							</view>
						</view>
					</scroll-view>
				</uni-section>
				<!-- <view class='food-relatives'>
					<view class='food-title'>相关推荐</view>
					<view class='relative-list'>
						<view class='relative-item'>
							<view class='step-image'>
								<image src='/static/image/bg-top.png' mode='widthFix' class='relative-image'></image>
							</view>
							<view class='relative-name'>步骤1/4</view>
						</view>
					</view>
				</view> -->
			</view>
		</scroll-view>
		<view class='food-btnbar' :style='{height: bottomMenuBarHeight + "px"}'>
			<view class='food-btnitem' @click.stop="focusComment">
				<view class='comment'>说点什么</view>
			</view>
			<view class='food-btnitem' @click.stop="showComment">
				<image src='/static/image/ico-comment.png' mode='widthFix' class='i2'></image>
				<text class="cor-tb btn-text">评论</text>
			</view>
			<view class='food-btnitem' @click.stop="addFav">
				<image src='/static/image/ico-fav.png' mode='widthFix' class='i2' v-if='!food.favFlag' :animation='rotateAnimation'></image>
				<image src='/static/image/ico-fav-orange.png' mode='widthFix' class='i2' v-if='food.favFlag' :animation='rotateAnimation'></image>
				<text class="btn-text cor-tb">{{food.favFlag?"已收藏":"收藏"}}</text>
			</view>
			<view class='food-btnitem' @click.stop="goCorp">
				<image src='/static/image/ico-camera.png' mode='widthFix' class='i2'></image>
				<text class="cor-tb btn-text">学做</text>
			</view>
		</view>
	</view>
	<csinput ref='csinput' @method='commitComment'></csinput>
	<cscomment ref='cscomment' @method='commitComment'></cscomment>
	<cscorp ref='cscorp' @save='saveImage' :maxcount="3" headtitle='下一步' :headcolor="setting.coro"></cscorp>
</template>
<script>
	import csinput from '@/components/popup/input/csinput.vue';
	import cscorp from '@/components/cscorp/cscorp.vue';
	import cscomment from '@/components/popup/cscomment.vue';
	import gui from '@/lib/gui.js';
	import effective from '@/lib/effective.js';
	
	export default {
		components:{
			csinput,
			cscomment,
			cscorp
		},
		data() {
			return {
				slideUpAnimation: null,
				rotateAnimation: null,
				visibleSync: false,
				posBottomAuthorBlock: 200,
				coverHeight: 100,
				scrollCoverDisplayFlag: false,
				scrollDisplayFlag: false,
				scrollHeadDisplayFlag: false,
				bottomMenuBarHeight: 60,
				setting: {},
				assignCoverWidth: 0,
				assignCoverHeight: 0,
				food: {
					name: '蒜苗回锅肉',
					cover: '/static/image/test/1.jpg', 
					remark: '线性渐变linear-gradient \n请注意即使是通过渐变生成的背景,其本质还是属于背景图片而不是背景颜色,本文中采用的简写背景属性background: linear-gra',
					video: 'http://res-mini.jctong.net/1593756443739.mp4',
					review: 52000,
					favcount: 1754,
					time: 60,
					timeStr: '60分钟',
					difficulty: 1,
					author_name: '暴跳小妞',
					author_head: '/static/image/ico-logo.png',
					favFlag: false,
					materialList: [
						{id: 1, name: '鸡腿肉快', quantity: 500, unit: '克', hasdetail: true},
						{id: 2, name: '鸡腿肉快', quantity: 500, unit: '克', hasdetail: false},
						{id: 3, name: '鸡腿肉快', quantity: 500, unit: '克', hasdetail: false},
						{id: 4, name: '鸡腿肉快', quantity: 500, unit: '克', hasdetail: false},
						{id: 5, name: '鸡腿肉快', quantity: 500, unit: '克', hasdetail: true},
						{id: 6, name: '鸡腿肉快', quantity: 500, unit: '克', hasdetail: false},
						{id: 7, name: '鸡腿肉快', quantity: 500, unit: '克', hasdetail: false},
						{id: 8, name: '鸡腿肉快', quantity: 500, unit: '克', hasdetail: false}
					],
					cookStepList: [
						{id: 1, img: '/static/image/test/1.jpg', remark: '锅里放水加料酒，放牛肉块，煮两分钟'},
						{id: 2, img: '/static/image/test/2.jpg', remark: '捞出冲干净备用'},
						{id: 3, img: '/static/image/test/3.jpg', remark: '锅里放油，放入葱姜干辣椒炒香'},
						{id: 4, img: '/static/image/test/4.jpg', remark: '放入牛肉，加十三香，蔬之鲜，香叶，桂皮，草果肉蔻，料酒，翻炒两分钟'},
						{id: 5, img: '/static/image/test/5.jpg', remark: '加入老抽和味极鲜，翻炒上色'},
						{id: 6, img: '/static/image/test/6.jpg', remark: '加入莫过肉多一点的水，大火烧开，转小火，盖盖子闷煮，水快没了再加一碗水，大概加两三次次左右，看肉烂的程度。'},
						{id: 7, img: '/static/image/test/7.jpg', remark: '200克面粉，2克酵母，100克水，揉成面团，醒发一个小时'},
						{id: 8, img: '/static/image/test/8.jpg', remark: '发好以后揉一揉排气'},
						{id: 9, img: '/static/image/test/1.jpg', remark: '忍不住了，大口吃起来！'}
					],
					dtcreateStr: '2023-11-11',
					tip: '做菜好吃都有技巧，我的每道菜都有小妙招，大家搜索“豆果”可以直接查看我的菜谱！',
					assignCount: 98,
					assignList: [
						{author_name: '暴跳小妞', author_head:'/static/image/ico-logo.png', assign_cover: '/static/image/test/4.jpg'},
						{author_name: '暴跳小妞', author_head:'/static/image/ico-logo.png', assign_cover: '/static/image/test/4.jpg'},
						{author_name: '暴跳小妞', author_head:'/static/image/ico-logo.png', assign_cover: '/static/image/test/4.jpg'},
						{author_name: '暴跳小妞', author_head:'/static/image/ico-logo.png', assign_cover: '/static/image/test/4.jpg'}
					]
				},
			}
		},
		mounted(){
			var that = this;
			gui.init(this);
			this.assignCoverWidth=this.setting.windowWidth * 0.4;
			this.assignCoverHeight=this.assignCoverWidth * 1.5;
		},
		methods: {
			hide(){
				this.hideInput();
				this.hideComment();
				this.visibleSync=false;
			},
			
			show(params){
				var that = this;
				that.visibleSync=true;
				that.scrollDisplayFlag=false;
				effective.slideUp(that, 'slideUpAnimation', params.top, ()=>{
					that.scrollDisplayFlag=true;
				});
			},
			
			hideComment(){
				this.$refs['cscomment'].hide();
			},
			
			hideInput(){
				this.$refs['csinput'].hide();
			},
			
			scrollFoodWrapper(e){
				if(e.detail.scrollTop >= this.coverHeight / 2){
					if(!this.scrollCoverDisplayFlag){
						this.scrollCoverDisplayFlag=true;
					}
				}else{
					if(this.scrollCoverDisplayFlag){
						this.scrollCoverDisplayFlag=false;
					}
				}

				if(e.detail.scrollTop >= this.posBottomAuthorBlock){
					if(!this.scrollHeadDisplayFlag){
						this.scrollHeadDisplayFlag=true;
					}
				}else{
					if(this.scrollHeadDisplayFlag){
						this.scrollHeadDisplayFlag=false;
					}
				}
			},
			
			loadFoodCover(e){
				var that = this;
				var queryBox = uni.createSelectorQuery().in(that).select('.food-author');
				that.coverHeight = e.detail.height * that.setting.windowWidth/ e.detail.width;
				that.posBottomAuthorBlock=that.coverHeight + 80;
			},
			
			focusComment(){
				console.log(this.$refs);
				this.$refs['csinput'].show();
			},
			
			commitComment(val){
				console.log(val);
			},
			
			showComment(){
				this.$refs['cscomment'].show();
			},
			
			addFav(){
				var that = this;
				if(!that.food.favFlag){
					effective.rotatePositive(that, 'rotateAnimation', ()=>{
						that.food.favFlag=!that.food.favFlag;
						that.rotateAnimation=null;
					});
				}else{
					effective.rotateNegative(that, 'rotateAnimation', ()=>{
						that.food.favFlag=!that.food.favFlag;
						that.rotateAnimation=null;
					});
				}
			},

			goCorp(){
				this.$refs.cscorp.show();
			},
			
			saveImage(e){
				console.log(e);
			}
		}
	}
</script>

<style>
	.food-container{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		font-size: 13px;
		position:fixed;
		top: 0px;
		left: 0px;
		background-color: rgba(0,0,0,0.5);
		z-index: 9999;
	}
	
	.food-header{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		position: relative;
		z-index: 999;
		background-image: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.0));
	}
	
	.food-header.scrolled{
		background-image: linear-gradient(to bottom, #fff, #fff);
	}
	
	.header-wrapper{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 90%;
	}
	
	.header-left{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}
	
	.header-middle{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}
	
	.food-head-author{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}
	
	.food-head-subscribe{
		background-color: #f39801;
		color: #fff;
		font-size: 12px;
		font-weight: bold;
		border-radius: 15px;
		padding: 3px 15px;
		margin-left: 10px;
	}
	
	.header-right{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}
	
	.header-icon{
		padding: 0px 10px;
	}

	.food-wrapper{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		position: absolute;
		top: 0px;
		left: 0px;
		background-color: #fff;
	}
	
	.food-image{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 100%;
	}
	
	.food-cover{
		width: 100%;
	}
	
	.food-content{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		width: calc( 100% - 30px );
		padding: 0px 15px;
	}
	
	.food-title{
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		word-break: break-all;
		width: 100%;
		font-size: 16px;
		font-weight: bold;
		padding: 10px 0px;
	}
	
	.food-author{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 10px 0px;
	}
	
	.author-left{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		width: 70%;
	}
	
	.author-image{
		width: 48px;
		border-radius: 100%;
	}
	
	.author-name{
		padding-left: 6px;
		font-size: 13px;
	}
	
	.author-right{
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		width: 30%;
	}

	.authod-subscribe{
		background-color: #f39801;
		color: #fff;
		font-size: 13px;
		font-weight: bold;
		padding: 5px 20px;
		border-radius: 20px;
	}
	
	.food-remark{
		font-size: 14px;
		padding: 0px 0px 10px 0px;
		line-height: 20px;
	}
	
	.food-labels{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		flex-wrap: nowrap;
		width: 100%;
		padding: 10px 0px;
	}
	
	.food-label{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 50%;
	}
	
	.label-image{
		width: 28px;
	}
	
	.label-text{
		font-size: 15px;
		font-weight: bold;
		padding-left: 4px;
	}
	
	.material-list{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: space-between;
		width: 100%;
	}
	
	.material-head{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}
	
	.material-func{
		color: #33b4ff;
	}
	
	.material-items{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
	}
	
	.material-item{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: calc( 100% - 20px );
		padding: 10px;
	}
	
	.material-name{
		color: #999;
	}
	
	.material-name.active{
		color: #33b4ff;
	}
	
	.material-quantity{
		
	}
	
	.food-steps{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
	}
	
	.step-head{
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
	}
	
	.step-func{
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
	}
	
	.step-items{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
	}
	
	.step-item{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
	}
	
	.step-title{
		text-align: left;
		padding: 10px 0px;
		width: 100%;
		color: #000;
	}
	
	.step-image{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		border-radius: 5px;
	}

	.step-remark{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
		width: 100%;
		line-height: 24px;
		font-size: 14px;
		color: #999;
		padding: 10px 0px;
	}

	.food-summary{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
	}
	
	.food-date{
		font-size: 12px;
		color: #ccc;
	}

	.food-tips{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
	}
	
	.tips-remark{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		line-height: 24px;
		font-size: 14px;
		color: #000;
		padding: 10px 0px; 
	}
	
	.food-assigns{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
	}
	
	.assign-allbtn{
		color: #33b4ff;
	}
	
	.assign-list{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		white-space: nowrap;
		flex-wrap: nowrap;
	}
	
	.assign-item{
		display: inline-flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		position: relative;
		margin-right: 10px;
	}
	
	.assign-label{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0px;
		left: 0px;
		color: #fff;
		background-image: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.0), rgba(0,0,0,0.5));
		border-radius: 10px;
	}
	
	.assign-header{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		width: calc( 100% - 20px );
		padding: 10px;
	}
	
	.assign-headcover{
		border: 1px solid #f1f1f1;
		border-radius: 100%;
	}
	
	.assign-name{
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		word-break: break-all;
		font-size: 14px;
		padding-left: 4px;
	}
	
	.assign-cover{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	
	.assign-image{
		border-radius: 10px;
		background: #000;
	}
	
	.food-btnbar{
		position: fixed;
		bottom: 0px;
		left: 0px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: calc( 100% - 20px );
		background-color: #fff;
		padding: 0px 10px;
		box-shadow: 0 0 10px 0 #ccc;
	}
	
	.food-btnitem{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}
	
	.food-btnitem .comment{
		background-color: #f1f1ff;
		color: #999;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		height: 32px;
		line-height: 32px;
		font-size: 14px;
		border-radius: 16px;
		width: 100px;
		padding: 0px 0px 0px 10px;
	}
	
	.btn-text{
		padding-left: 4px;
	}
</style>
